<template>
    <div class="video-panorama positionR" @click="tapVideo()" >
        <div class="background-logo" v-if="videoPanorama && videoPanorama.poster && posterShow" >
            <img class="loading-img" :src="staticImageUrl('images/loading.gif')" alt="">
            <img class="background-img" v-if="videoPanorama && videoPanorama.poster" :src="videoPanorama.poster" alt="">
        </div>
        <iframe id="videoPanoramaIframe" ref="iframeStyle" name="videoPanoramaIframe" class="iframe-style" v-if="isShow" :src="iframeUrl" @load="iframeLoad()"></iframe>
<!--        <img v-if="!isPlay && videoPanoramaMsg.poster" class="video-panorama-msg-poster" :src="videoPanoramaMsg.poster" alt="">-->
        <div class="video-wbtn" v-if="playBtnShow">
            <img class="video-btn" src="https://r.yibaotong.top/html/v_nw_h5_min/images/video_play_btn_par.png" alt="">
        </div>
        <!--这里想做提前加载的，但是没有用，先注释掉-->
<!--        <video ref="videoPlay"-->
<!--               v-show="existVideo"-->
<!--               width="1"-->
<!--               height="1"-->
<!--               :x5-playsinline="true"-->
<!--               :playsinline="true"-->
<!--               :webkit-playsinline="true"-->
<!--               x-webkit-airplay="true"-->
<!--               preload-->
<!--               x5-video-orientation="portraint"-->
<!--               video-orentation="portraint"-->
<!--                v-if="Array.isArray(videoPanorama.scenesArr) && videoPanorama.scenesArr[0].sceneFilePath"-->
<!--               :src="videoPanorama.scenesArr[0].sceneFilePath"></video>-->
    </div>
</template>

<script>
    import {mapGetters} from 'vuex';
    export default {
        name: "VideoPanorama",
        props:{
            videoPanoramaProps:Object,
            videoPanoramaMsgProps:Object,
        },
        data(){
            return{
                isShow:false,
                isPlay:false,
                playBtnShow:false,
                posterShow:true,
                iframeUrl:'https://media.haokanhaowan.cn/video/panorama',
                // iframeUrl:'http://test.uni.haokanhaowan.cn/vr/index.html',
                iframeLoaded:false,
                existVideo:true,
                videoPanorama:{
                    // iframeUrl:'http://localhost:8088/videoTest/UtoVRPlayerSDK_1.0.1188_Web/sample/sample_rotate.html?_ijt=7qcofrrj0bt0l4akvvkko7m76n',
                    name: "SceneViewer",
                    dragDirectionMode:true, //播放器拖动模式
                    width:"100%", //播放器的width
                    height:"100%", //播放器的height
                    // scenesArr: [{
                    //     sceneId: "v1",
                    //     sceneName: "赛车",
                    //     // sceneFilePath: "./test.mp4",
                    //     /*https://oss.yibaotong.top/files/ad_video/20191219_offline/01374891.mp4*/
                    //     sceneFilePath: "https://oss.haokanhaowan.cn/video/look/20011810_dev/ff60cc050498e6fe5f0ecf3fe3e74483.mp4",
                    //     sceneType: "Video",
                    //     initFov: 100,
                    //     isDragAble:true,//是否可改变视频进度
                    //     isAutoRotate: true,//是否自动旋转
                    //     isVideoAutoPlay:true,//是否自动播放
                    //     sceneSpeed: 4,
                    //     initPan:0,
                    //     isMouseWheel:true,
                    // }]
                },
                videoPanoramaMsg:{
                    // poster:''//海报图
                    // id:''//海报图
                    // isCanTouch:false,//是否可以滑动视频
                }
            }
        },
        computed:{
            ...mapGetters({
                currentStore:'currentStoreFn',
            })
        },
        created(){
            let tempObj = {
                poster:this.videoPanoramaMsgProps.poster,
                loadingImg:`<span style="width: 100vw;position:fixed;height:100vh; top: 0;left: 0;">
                        <img style="position: fixed;width: 100px;height: 100px;left: 0;right: 0;top:0;bottom:0;margin: auto;z-index:1;" src="${this.staticImageUrl('images/loading.gif')}" alt="">
                        <img style="width: 100vw;position:fixed;height:100vh; object-fit: cover;top: 0;left: 0;" src="${this.videoPanoramaMsgProps.poster}" />
                </span>`
            };
            this.videoPanorama = Object.assign({},this.videoPanorama,this.videoPanoramaProps,tempObj);
            this.videoPanoramaMsg = Object.assign({},this.videoPanoramaMsg,this.videoPanoramaMsgProps);
        },
        mounted(){
            setTimeout(()=>{
                this.posterShow = false;
            },2000)
            // let videoPar = window.localStorage.setItem('videoPanoParama',JSON.stringify(this.videoPanorama));
            if( this.videoPanorama && Object.keys( this.videoPanorama ).length > 0 ){
                /*兼容safri浏览器，暂时注释*/
                // this.iframeUrl += '?notIframe=notIframe&data='+encodeURIComponent(JSON.stringify(this.videoPanorama));
                this.iframeUrl += '?notIframe=notIframe'
                this.isShow = true;
                if(this.videoPanoramaMsg.isCanTouch){
                    setTimeout(()=>{
                        this.$refs.iframeStyle.style.zIndex = 1;
                    },50)
                }
            }else{
                this.isShow = false;
            }
            let that = this;
            window.addEventListener('message',function(e){
                if(e.data == 'loaded'){
                    that.posterShow = false;
                }else if(e.data == 'videoPlay'){
                    that.posterShow = false;
                    that.isPlay = true;
                    that.playBtnShow = false;
                }else if(e.data == 'videoPause'){
                    that.isPlay = false
                    that.playBtnShow = true;
                }else if(e.data == 'errorCallBack'){
                    that.$root.$emit('toast', {msg: '您的设备不支持全景观看'})
                    that.openHKHWConfirm('您的设备不支持全景视频，是否下载好看好玩观看')
                }
            },false);
        },
        methods:{
            iframeLoad(){
                setTimeout(()=>{
                    document.getElementById('videoPanoramaIframe').contentWindow.postMessage(JSON.stringify(this.videoPanorama), '*');
                },50)
            },
            tapVideo(){
                if(this.playBtnShow){
                    // console.log( this.videoPanorama.scenesArr[0])
                    // if(this.$refs.videoPlay){
                    //     this.$refs.videoPlay.play();
                    //     setTimeout(()=>{
                    //         this.existVideo = false;
                    //         this.$refs.videoPlay.pause();
                    //         this.videoPlay();
                    //     },20)
                    // }
                    this.videoPlay();
                }else{
                    this.videoPause();
                }
            },
            videoPlay(){
                document.getElementById('videoPanoramaIframe').contentWindow.postMessage('playerVideo', '*');
                this.isPlay = true;
            },
            videoPause(){
                document.getElementById('videoPanoramaIframe').contentWindow.postMessage('pauseVideo', '*');
                this.isPlay = false
            },
            closeAll(){
                this.isPlay = false;
                this.isShow = false;
            }
        },
        watch:{
            videoPanoramaProps(val){
                this.videoPanorama = Object.assign({},this.videoPanorama,val);
            },
            videoPanoramaMsgProps(val){
                this.videoPanoramaMsg = Object.assign({},this.videoPanoramaMsg,val);
            }
        }
    }
</script>

<style scoped lang="scss">
    /*html body {*/
        /*width: 100%;*/
        /*height: 100%;*/
        /*overflow: hidden;*/
        /*padding: 0px;*/
        /*margin: 0px;*/
    /*}*/
    .background-logo{
        .background-img{
            width: 100%;
            width: 100vw;
            height: 100%;
            height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
            object-fit: cover;
            z-index: 10;
        }
        .loading-img{
            position: fixed;
            width: 100px;
            height: 100px;
            left: 0;
            right: 0;
            top:0;
            bottom:0;
            margin: auto;
            z-index:20;
        }
    }
    .video-panorama{
        width: 100%;
        width: 100vw;
        height: 100%;
        height: 100vh;
    }
    .iframe-style{
        width: 100%;
        height: 100%;
        position: relative;
        z-index: -1;
    }
    .video-wbtn{
        position: absolute;
        z-index: 10;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        width: 50px;
        height: 50px;
    }
    .video-btn{
        height: 100%;
        width: 100%;
    }
    .video-panorama-msg-poster{
        width: 100%;
        height: 100%;
        position: absolute;
        object-fit: cover;
        z-index: 1;
        left: 0;
        top: 0;
    }
</style>